<template>
    <el-select v-model="value" 
        :disabled="disabled"
        :placeholder="`请选择${label}`"
        :style='domCss' 
        :multiple='multiple' 
        :collapse-tags='collapseTags'
        clearable
        :filterable="filterable"
        >
        <el-option
            v-for="(item,index) in currentOptions"
            :key="'this.$attrs.prop_'+index"
            :label="item[defaultProps.label]"
            :value="item[defaultProps.value]"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    props:{
        label: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        domCss: {
            type: String,
            default: ''
        },
        options: {
            type: Array,
            default: () => []
        },
        defaultProps: {
            type: Object,
            default: () => {return {
                label: 'label',
                value: 'value',
                children: 'children'
            }}
        },
        multiple: false,
        collapseTags: false,
        defaultValue: [String,Number,Array],
        optionsKey: '',
        filterable: false,
        defaultParams: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            apiOptions: []
        }
    },
    computed:{
        currentOptions () {
            let arr = []
            arr = this.options.concat(this.apiOptions)
            return arr
        },
        value: {
            get () {
                let v = this.multiple ? [] : ''
                if (this.multiple) {
                    if (this.defaultValue) {
                        v = (this.defaultValue + '').indexOf(',') > -1 ? this.defaultValue.split(',').map(item => +item) : [+this.defaultValue]
                    } else {
                        v = []
                    }
                } else {
                    v = this.defaultValue
                }
                return v
            },
            set (v) {
                let value = v;
                if(this.multiple) value = value.join(',');
                this.$emit('EventHandler','change', this.$attrs.prop,value);
            }
        }
    },
    async mounted () {
        if (this.optionsKey) {
            const params = {
                size: 500,
                current: 1,
                ...this.defaultParams
            }
            let data = await this.Lushu[this.optionsKey](params)
            this.apiOptions = this.options.concat(data.records)
        }
    },
    methods: {
    },
}
</script>

<style lang="scss" scoped>

</style>